<template>
<div>
  <flexbox class="oheader"
           id="oheader"
           :gutter="0"
           align="center"
           justify="center"
           :style="bcgStyle">
    <flexbox-item>
      <span class="obuttom"
            @click="hideOHeader">取消</span>
    </flexbox-item>
    <flexbox-item :span="8">
      <h3>已选定{{num}}个</h3>
    </flexbox-item>
    <flexbox-item>
      <span class="obuttom">全选</span>
    </flexbox-item>
  </flexbox>
  <flexbox class="obottom"
           id="obottom"
           :gutter="0">
    <flexbox-item v-if="isshowtab('download')">
      <div class="item"
           @touchstart="changeDownloadImg('download', 'p')"
           @touchend="changeDownloadImg('download', 'n')">
        <img :src="downloadNormal">
        <span :class="{ 'touchColor': touchDownload }">下载</span>
      </div>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('share')">
      <div class="item"
           @touchstart="changeShareImg('share', 'p')"
           @touchend="changeShareImg('share', 'n')">
        <img :src="shareNormal">
        <span :class="{ 'touchColor': touchShare }">分享</span>
      </div>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('delete')">
      <div class="item"
           @touchstart="changeDeleteImg('delete', 'p')"
           @touchend="changeDeleteImg('delete', 'n')">
        <img :src="deleteNormal">
        <span :class="{ 'touchColor': touchDelete }">删除</span>
      </div>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('rename')">
      <div class="item"
           @touchstart="changeRenameImg('rename', 'p')"
           @touchend="changeRenameImg('rename', 'n')">
        <img :src="renameNormal">
        <span :class="{ 'touchColor': touchRename }">重命名</span>
      </div>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('more')"
                  @click.native="clickMore"
                  class="alertContent"
                  ref="alertContent">
      <div class="alertTab"
           id="oheader-alertTab" 
           ref="alertTab"
           :style="site"
           v-show="showAlertTab">
        <div @touchstart="changeMoveImg('move', 'p')"
             @touchend="changeMoveImg('move', 'n')"
             @click="clickMove()">
          <img :src="moveNormal">
          <span :class="{ 'touchColor': touchMove }">移动</span>
        </div>
        <div @touchstart="changeCopyImg('copy', 'p')"
             @touchend="changeCopyImg('copy', 'n')">
          <img :src="copyNormal">
          <span :class="{ 'touchColor': touchCopy }">复制</span>
        </div>
        <div @touchstart="changeDetailImg('detail', 'p')"
             @touchend="changeDetailImg('detail', 'n')">
          <img :src="detailNormal">
          <span :class="{ 'touchColor': touchDetail }">查看详细信息</span>
        </div>
        <div @touchstart="changeAddShareImg('addShare', 'p')"
             @touchend="changeAddShareImg('addShare', 'n')">
          <img :src="addShareNormal">
          <span :class="{ 'touchColor': touchAddShare }">添加共享成员</span>
        </div>
      </div>
      <div class="item"
           @touchstart="changeMoreImg('more', 'p')"
           @touchend="changeMoreImg('more', 'n')">
        <img :src="moreNormal">
        <span :class="{ 'touchColor': touchMore }">更多</span>
      </div>
    </flexbox-item>
  </flexbox>
</div>

</template>

<script>
import { Flexbox, FlexboxItem } from 'vux';
import { mapState, mapActions } from 'vuex';

import copyNormal from '../assets/edit_tools_copy_normal.png';
import copyPressed from '../assets/edit_tools_copy_pressed.png';
import copyDisable from '../assets/edit_tools_copy_disable.png';
import deleteNormal from '../assets/edit_tools_delete.png';
import deletePressed from '../assets/edit_tools_delete_pressed.png';
import deleteDisable from '../assets/edit_tools_delete_disable.png';
import detailNormal from '../assets/edit_tools_detail_normal.png';
import detailPressed from '../assets/edit_tools_detail_pressed.png';
import detailDisable from '../assets/edit_tools_detail_disable.png';
import downloadNormal from '../assets/edit_tools_download.png';
import downloadPressed from '../assets/edit_tools_download_pressed.png';
import downloadDisable from '../assets/edit_tools_download_disable.png';
import moreNormal from '../assets/edit_tools_more.png';
import morePressed from '../assets/edit_tools_more_pressed.png';
import moreDisable from '../assets/edit_tools_more_disable.png';
import moveNormal from '../assets/edit_tools_move.png';
import movePressed from '../assets/edit_tools_move_pressed.png';
import moveDisable from '../assets/edit_tools_move_disable.png';
import renameNormal from '../assets/edit_tools_rename.png';
import renamePressed from '../assets/edit_tools_rename_pressed.png';
import renameDisable from '../assets/edit_tools_rename_disable.png';
import shareNormal from '../assets/edit_tools_share.png';
import sharePressed from '../assets/edit_tools_share_pressed.png';
import shareDisable from '../assets/edit_tools_share_disable.png';
import addShareNormal from '../assets/edit_tools_add_share_member_normal.png';
import addSharePressed from '../assets/edit_tools_add_share_member_pressed.png';
import addShareDisable from '../assets/edit_tools_add_share_member_disable.png';

import bcgStyle from '../assets/title_bar_with_avatar_selected_mode_bg.png';

export default {
  components: {
    Flexbox,
    FlexboxItem
  },
  props: [
    'num',
    'showbar'
  ],
  computed: {
    ...mapState({
          showAlertTab: state => state.oHeader.showAlertTab
    })
  },
  methods: {
    isshowtab(kind) {
      return this.showbar.indexOf(kind) >= 0
    },
    ...mapActions([
          'showOHeader',
          'showBottomAlertTab'
    ]),
    hideOHeader() {
      this.showOHeader(false)
      this.$root.$emit('hide-oheader')
    },
    clickMore() {
      this.showBottomAlertTab(this.$refs.alertTab.style.display === 'none')
      if (this.showAlertTab) {
        this.$nextTick(() => {
          const ph = this.$refs.alertContent.$el.offsetWidth,
            ah = this.$refs.alertTab.offsetWidth
          var str = ''
          if (ah >= ph) {
            str += 'right: 0; '
          } else {
            str += `right: ${(ph - ah) / 2}px; `
          }
          str += `bottom: ${53 + 2}px;`
          this.site = str
        })
      }
    },
    clickMove() {},
    changeMoveImg(param, t) {
      if (t === 'n') {
        this.touchMove = false
        this[`${param}Normal`] = moveNormal
      } else {
        this.touchMove = true
        this[`${param}Normal`] = movePressed
      }
    },
    changeCopyImg(param, t) {
      if (t === 'n') {
        this.touchCopy = false
        this[`${param}Normal`] = copyNormal
      } else {
        this.touchCopy = true
        this[`${param}Normal`] = copyPressed
      }
    },
    changeDetailImg(param, t) {
      if (t === 'n') {
        this.touchDetail = false
        this[`${param}Normal`] = detailNormal
      } else {
        this.touchDetail = true
        this[`${param}Normal`] = detailPressed
      }
    },
    changeAddShareImg(param, t) {
      if (t === 'n') {
        this.touchAddShare = false
        this[`${param}Normal`] = addShareNormal
      } else {
        this.touchAddShare = true
        this[`${param}Normal`] = addSharePressed
      }
    },
    changeMoreImg(param, t) {
      if (t === 'n') {
        this.touchMore = false
        this[`${param}Normal`] = moreNormal
      } else {
        this.touchMore = true
        this[`${param}Normal`] = morePressed
      }
    },
    changeRenameImg(param, t) {
      if (t === 'n') {
        this.touchRename = false
        this[`${param}Normal`] = renameNormal
      } else {
        this.touchRename = true
        this[`${param}Normal`] = renamePressed
      }
    },
    changeDeleteImg(param, t) {
      if (t === 'n') {
        this.touchDelete = false
        this[`${param}Normal`] = deleteNormal
      } else {
        this.touchDelete = true
        this[`${param}Normal`] = deletePressed
      }
    },
    changeDownloadImg(param, t) {
      if (t === 'n') {
        this.touchDownload = false
        this[`${param}Normal`] = downloadNormal
      } else {
        this.touchDownload = true
        this[`${param}Normal`] = downloadPressed
      }
    },
    changeShareImg(param, t) {
      if (t === 'n') {
        this.touchShare = false
        this[`${param}Normal`] = shareNormal
      } else {
        this.touchShare = true
        this[`${param}Normal`] = sharePressed
      }
    }
  },
  data() {
    return {
      downloadNormal,
      shareNormal,
      deleteNormal,
      renameNormal,
      moreNormal,
      moveNormal,
      copyNormal,
      detailNormal,
      addShareNormal,
      site: '',
      touchMove: false,
      touchCopy: false,
      touchDetail: false,
      touchAddShare: false,
      touchMore: false,
      touchRename: false,
      touchDelete: false,
      touchDownload: false,
      touchShare: false,
      bcgStyle: `background-image: url(${bcgStyle});`
    }
  }
}

</script>

<style lang="less">
.oheader {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 5px;
  position: absolute;
  top: -150px;
  transition: top .3s;
  z-index: 600;
  color: white;
  >div,
  h3 {
    text-align: center;
  }
  span {
    padding: 5px 10px;
    border: 1px solid #353535;
    border-radius: 2px;
    font-size: 13px;
    display: inline-block;
    min-width: 26px;
  }
}

.obottom {
  height: 53px;
  position: absolute;
  bottom: -53px;
  transition: bottom .5s;
  z-index: 600;
  color: white;
  background-color: #393F4F;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 30%;
      max-width: 30px;
    }
    span {
      font-size: 12px;
    }
  }
  .alertContent {
    position: relative;
    .alertTab {
      border-radius: 5px;
      min-width: 120px;
      background-color: rgba(51, 51, 51, 0.9);
      position: absolute;
      display: flex;
      flex-direction: column;
      padding: 0 8px;
      div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        span {
          font-size: 12px;
          flex: 1;
        }
        img {
          width: 25%;
          max-width: 25px;
          flex: 0 0 30%;
          margin-right: 8px;
        }
      }
      div:not(:last-child) {
        border-bottom: 1px solid #0003;
      }
    }
  }
}
</style>
